<template>
  <div class="hotel-detail">
    <div class="header">
      <div class="back-btn" @click="goBack">←</div>
      <div class="title">酒店预订</div>
      <div class="more-btn">...</div>
    </div>
    <div class="hotel-header">
      <div><img :src="hotel.imageUrl"></div>
      <div class="hotel-rating">
        <div class="rating-label">超棒</div>
        <div class="rating-score">{{ hotel.rating }}</div>
        <div class="rating-desc">{{ hotel.ratingDesc }}</div>
        <div class="rating-count">{{ hotel.ratingCount }}评价></div>
      </div>
    </div>
    <div class="hotel-info">
      <div class="hotel-name">{{ hotel.hotelName }}{{ hotel.storeName }}</div>
      <div class="hotel-type">{{ hotel.type }}</div>
      <div class="hotel-address">
        <span>{{ hotel.address }}</span>
        <span class="navigation" @click="navigate">导航</span>
      </div>
      <div class="hotel-distance">
        距永安里地铁站出口步行800米，约10分钟
      </div>
      <div class="hotel-features">
        <span v-for="feature in hotel.features" :key="feature">{{ feature }}</span>
      </div>
      <div class="hotel-detail-link" @click="showDetails">详情/设施></div>
    </div>
    <div id="app" class="date-picker-container">
      <div class="date-picker-item">
        <label>入住日期</label>
        <input type="date" v-model="hotel.checkInDate">
      </div>
      <div class="date-picker-item">
        <label>离店日期</label>
        <input type="date" v-model="hotel.checkOutDate">
      </div>
    </div>
    <div class="room-types">
      <div class="room-type-btn" @click="selectRoom('大床房')">大床房</div>
      <div class="room-type-btn" @click="selectRoom('双床房')">双床房</div>
      <div class="room-type-btn" @click="selectRoom('三床房')">三床房</div>
      <div class="room-filter-btn" @click="showFilter">筛选></div>
    </div>
    <div id="app">
      <div v-for="(room, index) in rooms" :key="index" class="room-card">
        <img :src="room.img" alt="房间图片">
        <div class="room-type">{{room.roomType}}</div>
        <ul class="room-info">
          <li>{{room.breakfast}} {{room.checkInTime}} 大床 {{room.occupancy}} 有窗</li>
          <li><i class="fafa-check"></i> {{room.cancellationPolicy}}</li>
          <li>{{room.packageDescription}}</li>
        </ul>
        <div class="room-price">{{room.currentPrice}}</div>
        <span class="original-price">{{room.originalPrice}}</span>
        <button class="book-button" @click="goToBookingPage(room.rid)">预定</button>
      </div>
    </div>
  </div>
</template>
<script>
import HomeView from "@/views/hotel/HomeView.vue";
import axios from "axios";
export default {
  data() {
    return {
      bannerHotel: [
        { src: 'img.png', alt: '酒店预订 banner 1' },
        { src: 'img2.png', alt: '酒店预订 banner 2' },
        { src: 'img3.png', alt: '酒店预订 banner 3' }
      ],
      hotel: {
        imageUrl: '', // 替换为实际酒店图片链接
        rating: '5.0',
        ratingDesc: '环境好',
        ratingCount: '666',
        hotelName: '速9精选酒店',
        storeName: '***门店',
        type: '经济型',
        address: '朝阳区建国门外永安里中街甲25号',
        features: ['2022年开业', '有影音房', '临地铁', '免费行李寄存', '免费叫醒服务', '免费提供口罩'],
        checkInDate: '',
        checkOutDate: '',
        // selectedRoom: null
      },
      id:this.$route.query.id,
      rooms: [],
      room:{},
    };
  },
  methods: {
    navigate() {
      // 这里可以实现导航功能，例如调用地图 API
      alert('导航功能待实现');
    },
    //跳转酒店详情页面
    showDetails() {
      this.$router.push({path: '/she', query: {id: this.id}});
    },
    // selectRoom(type) {
    //   this.hotel.selectedRoom = this.hotel.rooms.find(room => room.type === type);
    // },
    showFilter() {
      // 这里可以实现筛选房间的功能
      alert('筛选功能待实现');
    },

    // 这里可以实现预订房间的功能
    goToBookingPage(id){
      console.log("跳转页面前地房间id")
      console.log(id)
      this.$router.push({ name: 'hotel',query:{jiudianid:this.id}, params: { fangjianid: id} });
    },

    //←返回跳转上一页的方法
    goBack() {
      this.$router.go(-1);
    },
    //查询房间号的展示所有
    findAll(){
      axios.post('http://localhost:1000/hotel/selectRoom',this.room)
          .then(response => {
            // 处理获取到的数据
            this.rooms = response.data.data;
          })
          .catch(error => {
            // 处理错误
            console.error(error);
          });
    },
  },
  created() {
    console.log(this.id)
    this.axios.get('http://localhost:1000/hotel/findById/'+this.id).then(res => {
      this.hotel = res.data.data;
    })
    this.findAll();
  }
};
</script>

<style scoped>
.hotel-detail {
  padding: 20px;
}

.hotel-header {
  position: relative;
}

.hotel-header img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.hotel-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}

.rating-label {
  font-weight: bold;
}

.rating-score {
  font-size: 24px;
}

.rating-desc {
  font-size: 14px;
}

.rating-count {
  font-size: 12px;
}

.hotel-info {
  margin-top: 20px;
}

.hotel-name {
  font-size: 20px;
  font-weight: bold;
}

.hotel-type {
  color: #999;
  margin-top: 5px;
}

.hotel-address {
  margin-top: 10px;
}

.navigation {
  color: #333;
  cursor: pointer;
  margin-left: 10px;
}

.hotel-distance {
  color: #666;
  margin-top: 5px;
}

.hotel-features {
  margin-top: 10px;
}

.hotel-features span {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  font-size: 12px;
}

.hotel-detail-link {
  color: #333;
  cursor: pointer;
  margin-top: 10px;
}

.hotel-date {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.check-in,
.check-out,
.total-nights {
  text-align: center;
}

.room-types {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.room-type-btn,
.room-filter-btn {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.selected-room {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

.room-info {
  margin-bottom: 10px;
}

.room-type {
  font-size: 18px;
  font-weight: bold;
}

.room-desc {
  color: #666;
}

.room-price {
  display: flex;
  align-items: center;
}

.current-price {
  font-size: 24px;
  color: #ff5722;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.book-btn {
  display: inline-block;
  background-color: #1890ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1890ff;
  color: #fff;
  padding: 10px;
}

.back-btn,
.more-btn,
.camera-btn {
  cursor: pointer;
}

.title {
  font-size: 20px;
  font-weight: bold;
}
body{font-family:Arial,sans-serif;margin:0;padding:0}
.room-card{border:1px solid #ccc;border-radius:5px;margin:10px;padding:10px;width:300px}
.room-card img{width:100%;height:auto;border-radius:5px}
.room-type{font-size:18px;margin-top:10px}
.room-info{list-style:none;padding:0}
.room-price{color:red;font-weight:bold}
.original-price{text-decoration:line-through;color:#999}
.book-button{background-color:#007BFF;color:white;border:none;padding:8px 15px;border-radius:3px;float:right;cursor:pointer}

<style>
 .date-picker-container {
   width: 300px;
   margin: 20px auto;
   font-family: Arial, sans-serif;
 }
.date-picker-item {
  margin-bottom: 10px;
}
.date-picker-item label {
  display: inline-block;
  width: 80px;
}
.date-picker-item input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.submit-order {
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
}
.submit-order:hover {
  background-color: #0056b3;
}
</style>
